import React from 'react';
import { UserTableProps } from './interface';
import './styles.scss';

const UserTable: React.FC<UserTableProps> = ({users}) => {
    return (
        <div className='user-table'>
            <div className='user-table-row user-table-header'>
                <div className='user-table-cell'>Name</div>
                <div className='user-table-cell'>Age</div>
                <div className='user-table-cell'>Email</div>
            </div>
            {users.map((user, index) => (
                <div key={index} className='user-table-row'>
                    <div className='user-table-cell'>{user.name}</div>
                    <div className='user-table-cell'>{user.age}</div>
                    <div className='user-table-cell'>{user.email}</div>
                </div>
            ))}
        </div>
    )
};

export default UserTable;
